{% extends "admin/base.html" %}
{% block title %}用户管理{% endblock %}
{% block content %}
    <dialog id="my_modal" class="modal">
        <div class="modal-box">
            <form method="post" class="flex flex-col gap-4" id="edit_form">
                <div class="text-2xl" id="username_title"></div>
                {{ user_form.csrf_token(id="csrf_token_edit") }}
                <label class="input input-bordered flex items-center gap-2">
                    <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 16 16"
                            fill="currentColor"
                            class="h-4 w-4 opacity-70">
                        <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"></path>
                    </svg>
                    {{ user_form.username(class="grow", placeholder=user_form.username.label.text, id="user_username") }}
                </label>

                <label class="input input-bordered flex items-center gap-2">
                    <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 16 16"
                            fill="currentColor"
                            class="h-4 w-4 opacity-70">
                        <path fill-rule="evenodd"
                              d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
                              clip-rule="evenodd"></path>
                    </svg>
                    {{ user_form.password(class="grow", placeholder=user_form.password.label.text, type="text") }}
                </label>

                {{ user_form.authority(class="select select-bordered w-full", id="user_authority") }}
                <button class="btn btn-outline btn-primary w-full">修改</button>
                <div class="text-center w-full text-sm">点击空白处关闭</div>
            </form>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>

    </dialog>
    <div class="stats shadow w-full">
        <div class="stat">
            <div class="stat-figure text-secondary">
                <svg t="1721650767049" class="icon h-8 w-8" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="6969">
                    <path d="M85.461333 898.133333c0.725333-8.618667 1.28-14.037333 1.706667-16.213333 26.666667-152.490667 158.848-268.330667 317.909333-268.330667 162.816 0 297.514667 121.344 319.658667 279.125334l0.512 5.12a37.76 37.76 0 0 1-37.674667 40.832H686.933333c-21.248 0-39.253333-15.530667-42.410666-36.565334-17.493333-117.333333-118.058667-207.232-239.445334-207.232-121.301333 0-221.781333 89.813333-239.36 207.061334-3.2 21.12-21.333333 36.736-42.666666 36.736h-0.426667a37.290667 37.290667 0 0 1-37.162667-40.533334z m319.616-325.162666c-133.76 0-242.090667-109.141333-242.090666-243.84S271.317333 85.333333 405.077333 85.333333c133.802667 0 242.133333 109.098667 242.133334 243.797334 0 134.698667-108.373333 243.84-242.133334 243.84z m0-81.28c89.173333 0 161.450667-72.746667 161.450667-162.56 0-89.770667-72.234667-162.56-161.450667-162.56-89.173333 0-161.408 72.789333-161.408 162.56 0 89.813333 72.234667 162.56 161.408 162.56z"
                          fill="#1296db" p-id="6970"></path>
                    <path d="M677.674667 640.725333A42.666667 42.666667 0 0 1 682.666667 555.648v-0.213333c149.461333 10.368 271.146667 128.341333 296.448 281.344l1.792 12.202666 0.341333 4.138667c1.706667 21.845333-13.781333 40.96-34.56 42.752L942.933333 896c-19.626667 0-36.48-13.909333-41.429333-33.408l-1.024-4.992c-16.469333-115.797333-106.282667-206.208-217.856-216.618667zM682.666667 85.333333a215.253333 215.253333 0 0 1 42.368 4.181334A213.333333 213.333333 0 0 1 896 298.666667c0 117.845333-95.488 213.333333-213.333333 213.333333l-4.992-0.298667A42.666667 42.666667 0 0 1 682.666667 426.666667a128 128 0 1 0 0-256l-4.992-0.298667A42.666667 42.666667 0 0 1 682.666667 85.333333z"
                          fill="#1296db" p-id="6971"></path>
                </svg>
            </div>
            <div class="stat-title">用户量</div>
            <div class="stat-value">{{ user_manage.total | default(0) }}</div>
        </div>

        <div class="stat">
            <div class="stat-figure text-secondary">
                <svg t="1721650968618" class="icon h-8 w-8" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="8575">
                    <path d="M378.32704 591.100587c-94.306987-57.470293-148.7872-138.216107-152.10496-249.391787-2.327893-77.902507 24.132267-145.503573 77.806933-201.762133 117.76-123.398827 305.565013-120.149333 420.864 4.48512 122.170027 132.096 88.43264 361.079467-78.731946 446.890666 8.157867 3.560107 15.479467 6.802773 22.8352 9.960107 115.442347 49.5616 195.10272 133.35552 236.885333 252.0576 9.495893 26.989227 13.47584 55.954773 19.49696 84.118187a35.54304 35.54304 0 0 1-0.907947 15.31904 22.145707 22.145707 0 0 1-23.552 18.274986 24.36096 24.36096 0 0 1-24.18688-20.220586c-4.8128-22.869333-7.458133-46.51008-14.848-68.532907-46.926507-139.758933-141.018453-228.266667-287.092053-254.344533-125.129387-22.347093-233.929387 13.950293-323.9936 104.106666C192.38912 790.528 159.583573 861.866667 148.7872 943.622827c-2.048 15.44192-8.209067 24.20736-19.61984 27.00288-17.240747 4.21888-31.93856-8.802987-30.21824-27.009707a397.42464 397.42464 0 0 1 63.023787-180.964693 416.877227 416.877227 0 0 1 196.08576-162.4576c5.270187-2.164053 10.451627-4.5568 15.674026-6.853974 0.98304-0.436907 1.931947-0.938667 4.58752-2.239146z m133.802667-18.845014a236.130987 236.130987 0 1 0-235.564374-239.858346 235.444907 235.444907 0 0 0 235.5712 239.858346z m0 0"
                          p-id="8576" fill="#1296db"></path>
                </svg>
            </div>
            <div class="stat-title">普通用户</div>
            <div class="stat-value">{{ user_manage.total - admin_count | default(0) }}</div>
        </div>

        <div class="stat">
            <div class="stat-figure text-secondary">
                <svg t="1721651019483" class="icon h-8 w-8" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="9633">
                    <path d="M721.3 338.6c0-110.8-90.2-201-201-201s-201 90.2-201 201c0 72.5 38.6 136.1 96.2 171.5-10.4 3.3-20.6 7.1-30.7 11.3-42.1 17.8-79.9 43.3-112.4 75.8s-58 70.3-75.8 112.4c-18.4 43.6-27.8 89.9-27.8 137.6h46c0-169.6 138-307.6 307.6-307.6 109.9-1.2 198.9-90.9 198.9-201z m-356 0c0-85.5 69.5-155 155-155s155 69.5 155 155-69.5 155-155 155-155-69.5-155-155zM765.5 682v-50.2H843v-46h-77.4v-58H843v-46H719.5v204.8c-40.7 13.8-69.6 52.3-69.6 97.2 0 56.6 46 102.6 102.6 102.6 56.6 0 102.6-46 102.6-102.6 0.1-52.2-39.1-95.4-89.6-101.8z m-13 158.4c-31.2 0-56.6-25.4-56.6-56.6 0-30 23.4-54.8 53.3-56.6 1.1-0.1 2.2-0.1 3.3-0.1 31.2 0 56.6 25.4 56.6 56.6s-25.3 56.7-56.6 56.7z"
                          p-id="9634" fill="#1296db"></path>
                </svg>
            </div>
            <div class="stat-title">管理员</div>
            <div class="stat-value">{{ admin_count }}</div>
        </div>
    </div>
    <div class="divider"></div>

    <div class="overflow-x-auto pb-2">
        <table class="table table-pin-rows table-pin-cols">
            <!-- head -->
            <thead class="text-center z-10">
            <tr>
                <td>用户名</td>
                <td>注册时间</td>
                <td>登录时间</td>
                <td>用户权限</td>
                <th>操作</th>
            </tr>
            </thead>
            <tbody class="text-center text-nowrap">
            {% if user_manage %}
                {% for i in user_manage.items %}
                    <tr class="group hover:bg-base-200">
                        <td>{{ i.username }}</td>
                        <td>{{ i.register_time }}</td>
                        <td>{% if i.login_time %}{{ i.login_time }}{% else %}空{% endif %}</td>
                        <td>{{ i.authority_name }}</td>
                        <th class="group-hover:bg-base-200 z-[30]">
                            <div class="tooltip" data-tip="编辑">
                                <a class="btn btn-info btn-sm text-white"
                                   onclick="editUser('{{ url_for("admin.user_manage_edit", user_id=i.id) }}', '{{ i.username }}', '{{ i.authority }}')">
                                <span class="block md:hidden">
                                    <svg t="1721652262697" class="icon h-5 w-5" viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="10688"><path
                                            d="M943.4 205l-126-123.4c-10.3-10.7-24.6-16.8-39.4-16.8-14.9 0-29.1 6.1-39.5 16.8l-92.9 92.5-39.9 39-330.1 331.3c-7.8 8.3-13.1 18.6-15.2 29.7L219 776.7c-1.4 7.3 0.9 14.8 6.1 20.1 5.3 5.2 12.8 7.5 20.1 6.1l203.9-39.6c11.3-1.8 21.7-7.1 29.8-15.2l464.5-464c10.5-10.5 16.4-24.7 16.4-39.6 0-14.8-5.9-29-16.4-39.5zM284.5 738.6l27.1-134.7 108.4 108-135.5 26.7z m181.6-58L341.4 557.5 645.6 252l126.2 124.6-305.7 304z m345.4-343.8l-125.1-124 92.9-92.8 124.8 124.6-92.6 92.2z"
                                            p-id="10689" fill="#ffffff"></path><path
                                            d="M959.8 576.5c0-15.4-13.1-28.1-28.6-28.1-15.5 0-28 12.5-28 28v326.9h-783V120.7h412.1c15.1-0.9 27.1-12.9 28-28-0.9-15.1-12.9-27.1-28-28H120.2c-30.8 0.2-55.8 25.1-56 55.9v782.5c0 30.9 25.1 55.9 56 55.9h783.6c14.8 0 29.1-5.9 39.6-16.4 10.5-10.5 16.4-24.7 16.4-39.5V576.5z"
                                            p-id="10690" fill="#ffffff"></path></svg>
                                </span>
                                    <span class="hidden md:block">编辑</span>
                                </a>
                            </div>

                            <div class="tooltip" data-tip="删除">
                                <a class="btn btn-error btn-sm text-white"
                                   href="{{ url_for('admin.user_manage_del', user_id=i.id) }}">
                                <span class="block md:hidden">
                                    <svg t="1720941470037" class="icon h-5 w-5" viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="4460"><path
                                            d="M253.2 268h516.6c-8.7 0-15.9-7.6-15.3-16.4L715.4 878c0.5-7.4 6.3-12.8 13.8-12.8H293.8c7.4 0 13.3 5.5 13.8 12.8l-39.1-626.4c0.5 8.7-6.6 16.4-15.3 16.4z m-2 613.6c1.4 22.4 20.2 40.1 42.6 40.1h435.3c22.4 0 41.2-17.8 42.6-40.1l39.1-626.4c1.5-23.9-17.2-43.7-41.1-43.7H253.2c-23.9 0-42.5 19.8-41.1 43.7l39.1 626.4zM878.7 268c15.6 0 28.3-12.6 28.3-28.2s-12.6-28.3-28.3-28.3H144.3c-15.6 0-28.3 12.6-28.3 28.3 0 15.6 12.6 28.2 28.3 28.2h734.4zM389 268h245c23.1 0 41.7-18.9 41.7-41.8v-81.8c0-23.1-18.8-41.8-41.7-41.8H389c-23.1 0-41.7 18.9-41.7 41.8v81.8c-0.1 23 18.7 41.8 41.7 41.8z m14.7-123.7c0 8.1-6.5 14.7-14.8 14.7h245c-8.2 0-14.8-6.5-14.8-14.7v81.8c0-8.1 6.5-14.7 14.8-14.7H389c8.2 0 14.8 6.5 14.8 14.7v-81.8z m174.7 626.6c0 15.6 12.6 28.2 28.3 28.2 15.6 0 28.2-12.6 28.2-28.2V362.3c0-15.6-12.6-28.2-28.2-28.2s-28.3 12.6-28.3 28.2v408.6zM444.5 362.3c0-15.6-12.6-28.2-28.2-28.2s-28.2 12.6-28.2 28.2v408.6c0 15.6 12.6 28.2 28.2 28.2s28.2-12.6 28.2-28.2V362.3z m0 0"
                                            fill="#ffffff" p-id="4461"></path></svg>
                                </span>
                                    <span class="hidden md:block">删除</span>
                                </a>
                            </div>
                        </th>
                    </tr>
                {% endfor %}
            {% endif %}
            </tbody>
        </table>
    </div>

    {% if user_manage %}
        {% if user_manage.pages != 1 %}
            <div class="join flex justify-center items-center mt-3">
                {% if user_manage.has_prev %}
                    <a class="join-item btn" href="{{ url_for('admin.user_manage', page=user_manage.prev_num) }}">«</a>
                {% else %}
                    <a class="join-item btn" disabled>«</a>
                {% endif %}
                <button class="join-item btn">{{ user_manage.page }} / {{ user_manage.pages }}</button>
                {% if user_manage.has_next %}
                    <a class="join-item btn" href="{{ url_for('admin.user_manage', page=user_manage.next_num) }}">»</a>
                {% else %}
                    <a class="join-item btn" disabled>»</a>
                {% endif %}
            </div>
        {% endif %}
    {% endif %}
    <div class="divider"></div>
    <div class="card">
        <div class="card-body p-0">
            <div class="card-title">新增用户</div>
            <form action="{{ url_for('admin.user_manage_add') }}" method="post" class="flex flex-col gap-4">
                {{ user_form.csrf_token() }}
                <label class="input input-bordered flex items-center gap-2">
                    <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 16 16"
                            fill="currentColor"
                            class="h-4 w-4 opacity-70">
                        <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"></path>
                    </svg>
                    {{ user_form.username(class="grow", placeholder=user_form.username.label.text) }}
                </label>

                <label class="input input-bordered flex items-center gap-2">
                    <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 16 16"
                            fill="currentColor"
                            class="h-4 w-4 opacity-70">
                        <path fill-rule="evenodd"
                              d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
                              clip-rule="evenodd"></path>
                    </svg>
                    {{ user_form.password(class="grow", placeholder=user_form.password.label.text) }}
                </label>

                {{ user_form.authority(class="select select-bordered w-full") }}
                <button class="btn btn-outline btn-primary w-full">添加</button>
            </form>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        /**
         *
         * @param edit_url 编辑用户地址
         * @param username 用户名
         * @param authority 当前用户权限
         */
        function editUser(edit_url, username, authority) {
            let model_toast = document.getElementById('my_modal');
            let edit_form = document.getElementById('edit_form');
            let username_title = document.getElementById('username_title');
            let user_name = document.getElementById('user_username');
            let authority_edit = document.getElementById('user_authority');
            edit_form.action = edit_url
            user_name.value = username;
            username_title.innerHTML = `编辑当前用户：${username}`;
            for (let i = 0; i < authority_edit.options.length; i++) {
                if (authority_edit.options[i].value === authority) {
                    authority_edit.options[i].selected = true;
                }
            }
            model_toast.showModal();
        }
    </script>
{% endblock %}